
import {useEffect, useState} from 'react'

/**
 * 自定义Hook：
 *  是以use打头的函数，通过自定义hook函数可以用来实现逻辑的封装和复用
 * 
 * 思路：
 *  1.声明一个以use打头的函数
 *  2.在函数体内封装可用的逻辑
 *  3.把组件中用到的状态return回去(以对象或数组)
 *  4.在哪个组件中刚要用到这个逻辑，就执行这个函数，结构出来状态和回调进行使用
 */


function Son(){
  return(
    <div>this is Son
    </div>
  )
}



function useToogle(){
  const [value,setValue] = useState(true)
  const toogle = ()=>{setValue(!value)}

  return{
    value,
    toogle
  }
  

}



function App() {
  const {value,toogle} =useToogle()

  return (
    <div>
      {value && <Son/>}
     <button onClick={toogle}>toogle</button>
    </div>
  )
}

export default App;
